<template>
    <div class="tab-container">
        <el-dialog :visible.sync="dialogVisible" :width="$store.getters.isMobile?'90%':'50%'" >
            <span slot="title" class="dialog-header">
                <i style="color:#d41f19;margin-right: 12px;" class="el-icon-share"></i><span>{{ info.title
                }}</span>
            </span>
            <el-form label-width="9.37vw">
                <div class="select">
                    <el-form-item label="分享链接:">
                        <div class="copy">
                            <span>{{ info.link }}</span>
                            <el-button size="mini" type="success" @click="copyLink(info.link)">复制</el-button>
                        </div>
                    </el-form-item>
                </div>

                <div class="select">

                    <el-form-item label="微信分享:">
                       <div class="code">
                        <img :src="info.img" alt="">
                       </div>
                    </el-form-item>
                </div>

            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'shareDia',
    props: {
        info: {
            type: Object,
            default: () => {
                return {}
            },
        },
    },
    data() {
        return {
            dialogVisible: false
        };
    },
    computed: {
        // 计算滑块的样式
        sliderStyle() {
            const tabWidth = 100 / this.tabs.length; // 每个 Tab 的宽度百分比
            return {
                width: `${tabWidth}%`, // 滑块的宽度
                transform: `translateX(${this.activeTab * 100}%)`, // 滑块的偏移量
            };
        },
    },
    methods: {
        async copyLink(link) {
            try {
                await navigator.clipboard.writeText(link)
                this.$message.success('链接已复制') // 使用Element UI的消息提示
                // 或者 alert('链接已复制')
            } catch (err) {
                console.error('复制失败:', err)
                this.$message.error('复制失败')
            }
        },
        // 切换 Tab
        open() {
            this.dialogVisible = true
        }
    },
};
</script>

<style scoped lang="scss">
.dialog-header {
    font-weight: bold;
    font-size: 22px;
    display: flex;
    align-items: center;

    span {
        font-size: 18px;
        color: #409EFF;
        padding: 0 50px 0 00px;
        display: inline-block;
    }
}

.dialog-footer {
    font-weight: bold;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;

    button {
        margin: 0 50px;
        width: 140px;
        height: 50px;
        font-size: 16px;
        line-height: 50px;
        padding: 0;
    }
}

.copy {
    display: flex;
    align-items: center;

    span {
        margin-right: 20px;
        font-size: 18px;
        color: #409EFF;
    }
}

.select {
    img {
        max-width: 300px;
        max-height: 300px;
    }
}

.title {
    text-align: center;
    font-weight: bold;
    font-size: 25px;
    color: #000;
    margin-bottom: 50px;
}
@media screen and (max-width:768px) {
    .copy{
        width: 100%;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        span{
            font-size: 14px;
            line-height: 20px;
        
        }
        button{
            font-size: 12px;
            width: 40px;
         margin-top: 10px;
            height: 20px;
        }
    }
    .select{
       .code{
        text-align: center;
       }
        img{
            max-width: 100px;
            max-height: 100px;
        }
    }
}
</style>